<!-- 提交订单组件 -->
<template>
  <div class="order-bar">
    <div class="order-bar__amount">
      <span class="order-bar__txt">{{ orderTxt }}</span>
      <template v-if="isIntegral">
        <span class="order-bar__price--integer ET3"> {{ integralPrice }} </span>
        <span class="order-bar__price--decimal ET3"> 积分</span>
        <span class="ET1" v-if="freight"> (含运费 ¥ {{ freight }})</span>
      </template>
      <template v-else>
        <span>合计：</span>
        <span class="pay-currency ET0 channel-main-font">¥ </span>
        <span class="order-bar__price--integer ET3 channel-main-font"> {{ priceInt }}</span>
        <span class="order-bar__price--decimal ET0 channel-main-font">{{ priceFloat }}</span>
        <span class="order-bar__price--exchange-price" v-if="isPaypal">（{{currencyInfo.currency_code_symbol}}{{currencyInfo.currency_price | fixedPrice}}）</span>
        <div class="order-bar__price--exchange-text" v-if="isPaypal">{{currencyInfo.currency_conversion_rate_text}}</div>
      </template>
    </div>
    <button class="order-bar__button theme-customize-bg channel-linear" :disabled="disabled"
      @click.stop="$emit('submitOrder')">提交订单</button>
  </div>
</template>

<script>
import { PAY_WAY_LIST } from "@xiaoe/etransaction";
function formatPrice(price) {
  return price >= 0 ? (price / 100).toFixed(2) : "--.--";
}

export default {
  name: "OrderBar",
  props: {
    //是否是积分
    isIntegral: {
      type: Boolean,
      default: false
    },
    valuateData: {
      type: Object,
      default: () => ({})
    },
    orderTxt: String,
    disabled: {
      type: Boolean,
      default: false
    },
    payWay: {
      type: Number,
      default: 0,
    },
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    count: {
      type: Number || String,
      default: 1
    },
    virtualInfo: {
      type: Object,
      default: () => ({})
    },
    currencyInfo: {
      type: Object,
      default: () => ({})
    },
  },
  filters: {
    fixedPrice(val) {
      return (Number(val) / 100).toFixed(2);
    },
  },
  computed: {
    ratePrice() {
      const priceInfo = this.valuateData?.price_info || {};
      const {  final_price } = priceInfo;
      const price = final_price 
      return formatPrice(price)
    },
    freight(){
      const priceInfo = this.valuateData?.price_info || {};
      const {  actual_shipment_fee = 0 } = priceInfo;
      return (Number(actual_shipment_fee) / 100).toFixed(2)
    }, 
    priceInt() {
      return this.ratePrice.slice(0, -3);
    },
    priceFloat() {
      return (this.ratePrice >= 0 && this.ratePrice.slice(-3)) || "";
    },
    finalPrice() {
      return this.priceInt + this.priceFloat;
    },
    integralPrice() {
      return Number(this.baseInfo.pointsNum) * Number(this.count)
    },
    isPaypal(){
      return this.payWay === PAY_WAY_LIST.PAYPAL  && this.currencyInfo.has_result;
    }
  },
  methods: {
    getFinalPrice() {
      return this.finalPrice;
    }
  }
}
</script>

<style lang="scss"  scoped>
@import "../assets/styles/global.scss";
@import "../assets/styles/common.scss";
.order-bar {
  @include fixPosition;
  bottom: 0;
  background: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
  @include safeAreaBottom;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.4rem;
  height: 1.12rem;

  &__txt {
    font-weight: 500;
  }

  .order-bar__price--decimal,
  .order-bar__price--integer,
  .pay-currency {
    color: #ff5429;
    font-weight: 500;
  }

  .order-bar__price--exchange-price{
    font-size: .24rem;
    color: #666;
  }
  .order-bar__price--exchange-text{
    font-size: .24rem;
    color: #999;
  }

  &__button {
    width: 2.4rem;
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    border: none;
    color: white;
    outline: 0;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.2;
    }
  }
}
</style>